<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />
    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
      <template #shop>
        <el-select filterable
                   v-model="baTable.comSearch.form['shop_id']"
                   clearable>
          <el-option v-for="item in shop_arr"
                     :key="item.shop_id"
                     :label="item.shop_name"
                     :value="item.shop_id">
          </el-option>
        </el-select>
      </template>
      <template #month>
        <el-date-picker v-model="baTable.comSearch.form['date']"
                        type="month"
                        placeholder="选择月份"
                        value-format="YYYY-MM" />
      </template>
    </TableHeader>
    <el-row style="margin: 10px 0;"
            :gutter="10">
      <el-col :span="1.5">
        <el-button type="warning"
                   @click="exportExcelOperate"
                   :loading="state.buttonLoading"
                   v-if="baTable.auth('export')">
          <Icon :color="'#ffffff'"
                name="el-icon-Position" />导出
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table />

  </div>
</template>


<script setup lang="ts">
import { provide, reactive, ref, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi, fileDownload } from '/@/api/common'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
import { ElMessageBox } from 'element-plus'
import { exportExcel, getTableTitle } from '/@/api/backend/product/productNums'
import { getShopList } from '/@/api/backend/common'

defineOptions({
    name: 'product/productNums',
})

const { t } = useI18n()

const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})
const shop_arr = ref([] as any[])
const baTable = new baTableClass(
    new baTableApi('/product/productNums/'),
    {
        column: [
            {
                label: '店铺',
                prop:  'shop_id',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'shop',
                show: false
            },
            {   
                label: '店铺', 
                prop: 'shop_name', 
                align: 'center',
                operator: false
            },
            {
                label: '月份',
                prop:  'date',
                operator: '=', 
                align: 'center',
                comSearchRender:'slot',
                comSearchSlotName: 'month'
            }
        ],
        dblClickNotEditColumn: ['all']
    }
)

provide('baTable', baTable)

baTable.mount()


const exportExcelOperate = () => {
    state.buttonLoading = true
    baTable.table.loading = true
    ElMessageBox.confirm(
        '是否确认导出所有数据项?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        type keymaps = {
            [key: string]: string | number
        }
        const obj:keymaps = {}
        baTable.table.filter?.search!.forEach(v => {
            obj[v.field] = v.val
        }) || []
        exportExcel('post', obj).then(response => {
            fileDownload(response, Cookies.get('filename') || 'file.xlsx')
        }).catch(err => {
            state.buttonLoading = false
            baTable.table.loading = false
        }).finally(() => { 
            state.buttonLoading = false
            baTable.table.loading = false
        })
        state.buttonLoading = false
        baTable.table.loading = false
    }).catch(() => {
        state.buttonLoading = false
        baTable.table.loading = false
    })
}

const getTitles = () => {
    baTable.table.loading = true
    return getTableTitle().then(res => {
        if(res.data && res.data.length) {
            res.data.forEach((v:any) => {
                baTable.table.column.push(
                    {
                        label: v, 
                        prop: v, 
                        align: 'center',
                        operator: false
                    }
                )
            })
        }
        baTable.table.column.push(
            {
                label: '总件数', 
                prop: 'month_sum', 
                align: 'center',
                operator: false
            }
        )
    })
}

const getShopArr = () => {
    getShopList().then(res => {
        if(res.data && res.data.list.length) {
            shop_arr.value = res.data.list
        }
    })
}

onBeforeMount(async () => {
    getShopArr()
    await getTitles()
    baTable.getIndex()
})

</script>

<style scoped lang="scss">
.top-block{
    padding: 15px;
    background: #fff;
    .el-row{
        margin: 10px 0;
    }
    .text{
        font-size: 16px;
        span{
            padding: 0 5px;
            color: rgb(253, 47, 47);
            font-size: 20px;
        }
    }
    :deep(.picker){
        width: 200px !important;
    }
}

:deep(.el-date-editor.el-input){
    width: var(--el-input-width);;
}
</style>
